<template>
	<view>
		<u-toast ref="uToast" />
		<common :tips='commonTips'></common>
		<u-modal v-model="modelShow" :mask-close-able="true" :show-cancel-button="true" @confirm="delConfirm" :content="modelContent"></u-modal>
		<u-action-sheet v-if="type == 'user'" :list="userStatusList" :safe-area-inset-bottom="true" @click="changeUserStatus" v-model="userStatusBool"></u-action-sheet>
		<view class="user-box">
			<image :src="info.avatar" class="user-avatar" mode="aspectFill"></image>
			<view class="user-right">
				<view class="user-right-item user-name">
					<text class="nickname-text">{{info.nickname_origin ? info.nickname_origin:info.nickname}}</text>
					<text v-if="info.remark">(<text class="nickname-text">{{info.remark}}</text>)</text>
				</view>
				<view class="user-right-item">{{info.bio}}</view>
				<view v-if="type == 'user'" @click="userStatusBool = (info.id == userinfo.id ? true:false)" :class="'user-status-' + info.status.value" class="user-right-item user-status"> • {{info.status.chinese}}</view>
				<view v-if="type == 'group' || type == 'service'" class="user-right-item user-status">{{info.other}}</view>
			</view>
			<view v-if="info.friend && (info.id != userinfo.id)" class="collection-user">
				<u-icon @click="collectionUser" color="#6388fb" :name="(info.group == 'common') ? 'star-fill':'star'"></u-icon>
			</view>
		</view>
		<view class="info_line"></view>
		<u-cell-group v-if="(type == 'group' && !info.deletetime) || type == 'user' || type == 'service'" :border="false" class="user-info-box">
			<view v-if="type=='user'">
				<!-- 用户信息 -->
				<view class="weixin_box" v-if="(type == 'user') && info.friend && (info.id != userinfo.id)">
					<view class="weixin_input" @tap="goRemark" hover-class="session-item-hover">
						<view class="intext">设置备注和标签</view>
						<image class="inimg" :src="photo_cdn + 'zpupload/static/user/jiantoua.png'"></image>
					</view>				
				</view>
				<!-- <view class="weixin_box">
					<view class="weixin_input">
						<view class="intext">朋友权限</view>
						<image class="inimg" src="/s1tatic/user/jiantoua.png"></image>
					</view>
				</view> -->
				<view class="info_block"></view>
				<view class="weixin_box" hover-class="session-item-hover">
					<view class="weixin_input" @tap="gofriend">
						<view class="intext">朋友圈</view>
						<image class="inimg" :src="photo_cdn + 'zpupload/static/user/jiantoua.png'"></image>
					</view>
				</view>
				<view class="weixin_box" @tap="goMore" hover-class="session-item-hover">
					<view class="weixin_input">
						<view class="intext">更多信息</view>
						<image class="inimg" :src="photo_cdn + 'zpupload/static/user/jiantoua.png'"></image>
					</view>
				</view>
				<view class="info_block"></view>
				<view class="sendmess" v-if="info.friend" @tap="userAction('open-session',id,type)" hover-class="session-item-hover">
					<image class="sendimg" :src="photo_cdn + 'zpupload/static/img/sendmess.png'" mode="widthFix"></image>
					<view class="sendtext">发消息</view>
				</view>
				<view class="sendmess" v-else @tap="userAction('add-friends',id,type)" hover-class="session-item-hover">
					<view class="sendtext">加为好友</view>
				</view>
			</view>
			<!-- 用户信息 End -->
			<block v-for="(item,index) in detail" :key="index" v-if="type == 'group'">
				<!-- 群聊信息 -->
				<!-- 在u-cell-item内的v-if失效了？ -->
				<u-cell-item class="split" v-if="item.type && item.type == 'leader'" hover-class="none" :border-top="false" :border-bottom="false" :arrow="false" :title="item.title">
					<navigator :url="'/pagesim/center/info?type=user&id=' + item.leader.id" class="leader-avatar-box" slot="right-icon">
						<image :src="item.leader.avatar" class="leader-avatar" mode="widthFix"></image>
						<u-icon name="arrow-right"></u-icon>
					</navigator>
				</u-cell-item>
				<u-cell-item class="split" v-else-if="item.name == 'id'" @click="clipboardId(item.value)" hover-class="none" :border-top="false" :border-bottom="false" :arrow="false" :title="item.title">
					<view slot="right-icon">{{item.value}}</view>
				</u-cell-item>
				<u-cell-item class="split" v-else hover-class="none" :border-top="false" :border-bottom="false" :arrow="false" :title="item.title">
					<view slot="right-icon">{{item.value}}</view>
				</u-cell-item>
			</block>
			<!-- 群聊信息 End-->
			<navigator class="split" v-if="type == 'group'" :url="'/pagesim/center/group_chat_notice?group_id=' + info.id">
				<u-cell-item hover-class="none" :border-top="false" :border-bottom="false" title="群公告"></u-cell-item>
			</navigator>
			<navigator v-if="type == 'group'" :url="'/pagesim/center/group_chat_users?id=' + info.id">
				<u-cell-item hover-class="none" :border-top="false" :border-bottom="false" title="群成员列表"></u-cell-item>
			</navigator>
			
			<!-- <u-cell-item v-if="(type == 'user') && info.friend && (info.id != userinfo.id)" hover-class="none" :border-bottom="false" :border-top="false" :arrow="true" title="备注">
				<view slot="right-icon">
					<u-input @blur="saveRemark" placeholder="请输入备注内容" :clearable="false" input-align="right" type="text" v-model="info.remark" :border="false" />
				</view>
			</u-cell-item> -->
		</u-cell-group>
		<view class="im-data-none" v-if="type == 'group' && info.deletetime">群聊已解散~</view>
		<view v-if="type == 'group'" class="user-buttons">
			<!-- <u-button @click="userAction(item.action, item.data, item.type, item.opt)" v-for="(item,index) in buttons" :key="index" :type="item.btype">{{item.name}}</u-button> -->
			<view class="group_btn" v-for="(item,index) in buttons" :key="index" @tap="userAction(item.action, item.data, item.type, item.opt)">
				<view :class="{'gr_default':item.btype=='default'||item.btype=='success','gr_error':item.btype=='error'}">{{item.name}}</view>
			</view>
		</view>
		<!-- <view class="user-buttons" v-if="(type == 'user') && info.friend && (info.id == userinfo.id)">
			<u-button  @click="userAction(item.action, item.data, item.type, item.opt)" v-for="(item,index) in buttons" :key="index" :type="item.btype">{{item.name}}</u-button>
		</view> -->
		<view class="sendmess" v-if="(type == 'user') && info.friend && (info.id == userinfo.id)" @tap="userAction('userinfo-opt', id, 'user', 'edit')" hover-class="session-item-hover">
			<view class="sendtext">编辑资料</view>
		</view>
	</view>
</template>

<script>

	import config from "@/utils/config.js";
	let {staticurl,photo_cdn} = config.baseUrl;
	export default {
		data() {
			return {
				id: 0,
				type: '',
				userStatusBool: false,
				userStatusList: [{
					text: '在线',
					color: '#21E589'
				}, {
					text: '忙碌',
					color: '#FF647E'
				}, {
					text: '隐身',
					color: '#FF9C4E'
				}],
				info: {
					status: {
						value: 0,
						chinese: '加载中'
					}
				},
				detail: [],
				buttons: [],
				userinfo: [],
				modelShow: false,
				modelContent: '',
				commonTips: '',
				photo_cdn
			}
		},
		onLoad:function(query){
			this.id = query.id ? query.id:0
			this.type = query.type ? query.type:'user'
			this.userinfo = uni.getStorageSync('userinfo');// 防止需要在pageDataLoad使用到用户ID
			// this.ws.pageFun(this.pageDataLoad, this);
			console.log(this.info,'头像头像头像')
			console.log(this.id)
			console.log(this.type)
		},
		onShow() {
			this.ws.checkNetwork(this)
			// if (this.ws.pageRefresh.centerInfo) {
			// 	this.ws.pageRefresh.centerInfo = false
			// 	this.ws.pageFun(this.pageDataLoad, this);
			// }
			this.ws.pageFun(this.pageDataLoad, this);
		},
		onPullDownRefresh: function () {
			this.ws.pageFun(this.pageDataLoad(true), this);//传了个 this
			this.ws.onMessageCallBack.set('info-detail', (msg) => {
				if (msg.data.data.refresh) {
					this.$refs.uToast.show({
						title: '刷新成功~',
						type: 'success'
					})
					uni.stopPullDownRefresh()
				}
			})
		},
		methods: {
			//加载某个人的信息 ws common websocket  
			pageDataLoad: function (refresh = false) {
				var that = this
				this.ws.send({
					c: 'User',
					a: 'infoDetail',
					data: {
						'method': 'get',
						'type': that.type,
						'id': that.id ? that.id:that.userinfo.id,
						'requestor': that.userinfo.id,
						'refresh': refresh
					}
				})
			},
			changeUserStatus: function (index) {
				var that = this
				that.ws.pageFun(function () {
					that.ws.send({ c: 'ImBase', a: 'changeStatus', data: { 'status': (index + 1) } });
				}, that);
			},
			userAction: function (action, data, type, opt) {
				console.log(this.buttons,'butt')
				if (action == 'del-contact') {
					switch (type) {
						case 'user':
							this.modelContent = '你确定要删除此好友吗？';
							break;
						case 'group':
							this.modelContent = '你确定要退出群聊吗？';
							break;
						case 'dissolution-group':
							this.modelContent = '你确定要解散群聊吗？';
							type = 'group';
							break;
					}
					this.modelShow = true
					this.info.delType = type
				} else if(action == 'open-session') {
					let message = { c: 'Message', a: 'openSession', data: { 'id': data, 'type': type } }
					this.ws.send(message);
					console.log(data,'data')
				
				} else if(action == 'add-friends') {
					uni.navigateTo({
						url: '/pagesim/search/add-contact?id=' + data + '&type=' + type
					})
				} else if(action == 'userinfo-opt') {
					if (opt == 'edit') {
						uni.navigateTo({
							url: '/pagesim/center/edit-info?id=' + data + '&type=' + type
						})
					} else if(opt == 'join') {
						uni.navigateTo({
							url: '/pagesim/search/add-contact?id=' + data + '&type=' + type
						})
					}
				} else if (action == 'close') {
					uni.navigateBack({
						delta: 1
					})
				}
			},
			delConfirm: function () {
				var that = this
				that.ws.pageFun(function(){
					let message = {
						c: 'User',
						a: 'delContact',
						data: {
							'id': that.info.id,
							'type': that.info.delType
						}
					}
					that.ws.send(message);
				}, that)
			},
			saveRemark: function (value) {
				if (value != this.info.oldRemark) {
					let message = {
						c: 'User',
						a: 'updateFriendInfo',
						data: {
							id: this.info.id,
							new_remark: value,
							method: 'update_remark'
						}
					}
					this.ws.send(message);
				}
				console.log(this.info,'info')
			},
			collectionUser: function () {
				var that = this
				that.ws.pageFun(function(){
					var new_group = 'common'
					if (that.info.group == 'common') {
						new_group = 'all_friends'
					}
					let message = {
						c: 'User',
						a: 'updateFriendInfo',
						data: {
							id: that.info.id,
							new_group: new_group,
							method: 'update_group',
							source: 'uni-app'
						}
					}
					that.ws.send(message);
					that.info.group = new_group
					that.ws.showMsgCallback = function () {
						that.ws.pageRefresh.addressList = true
					}
				}, that)
			},
			clipboardId: function(id) {
				var that = this
				uni.setClipboardData({
					data: id.toString(),
					success: function () {
						uni.hideToast()
						that.$refs.uToast.show({
							title: '账号已复制~',
							type: 'success'
						})
					}
				});
			},
			goMore(){
				uni.navigateTo({
					url:`/pagesim/center/more_info?id=${this.id}`
				})
			},
			goRemark(){
				uni.navigateTo({
					url:`/pagesim/center/set_remark?id=${this.id}`
				})
			},
			gofriend(){
				uni.navigateTo({
					url:`/pages/circle/mycircle/mycirlce?imuser_id=${this.id}`
				})
			}
		}
	}
</script>

<style lang="scss">
page {
	background-color: #EDEDED;
}
.split{
	border-bottom: 1rpx solid #F4F6F8;
}
.user-box {
	display: flex;
	padding: 20rpx 4vw 80rpx 4vw;
	align-items: center;
	background-color: #FFFFFF;
}
.weixin_box{
	background-color: #FFFFFF;
	
	.weixin_input{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 32rpx;
		border-bottom: 1rpx solid #F2F2F2;
		.intext{
			font-size: 30rpx;
			font-weight: 600;
		}
		.inimg{
			display: flex;
			width: 14rpx;
			height: 24rpx;
		}
	}	
}
.session-item-hover{
	background: #EDEDED !important;
}
.info_line{
	height: 1rpx;
	width: 30rpx;
	background-color: #FFFFFF;
}
.cell_line{
	height: 1rpx;
	width: 100%;
	margin-left: 30rpx;
	background-color: #F2F2F2;
}
.info_block{
	width: 100%;
	height: 20rpx;
	background-color: #EDEDED;
}
.sendmess{
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 20rpx 0;
	background-color: #FFFFFF;
	border-bottom: 1rpx solid #F2F2F2;
	.sendimg{
		width: 40rpx;
		height: 20rpx;
	}
	.sendtext{
		font-size: 32rpx;
		color: #6C7B9A ;
		font-weight: 600;
		margin-left: 20rpx;
	}
}
.user-avatar {
	height: 170rpx;
	width: 170rpx;
	border-radius: 10rpx;
}
.collection-user {
	display: flex;
	align-items: center;
	justify-content: center;
}
.user-right {
	width: 70%;
	padding-left: 20rpx;
}
.user-right-item {
	display: block;
	line-height: 32rpx;
}
.user-name {
	line-height: 46rpx;
	font-size: 30rpx;
	overflow: hidden;
	text-overflow:ellipsis;
	white-space: nowrap;
}
.nickname-text {
	display: inline-flex;
	max-width: 46%;
	overflow: hidden;
	text-overflow:ellipsis;
	white-space: nowrap;
	font-size: 36rpx;
	font-weight: 600;
	margin-bottom: 20rpx;
}
.user-status {
	color: $--gray;
	line-height: 46rpx;
}
.user-info-box {
	display: block;
	width: 100%;
	margin: 0 auto;
}
.user-buttons {
	// padding: 30rpx 0;
	// display: flex;
	margin-top: 20rpx;
	align-items: center;
	justify-content: space-around;
}
.group_btn{
	padding: 20rpx 0;
	text-align: center;
	font-size: 32rpx;	
	font-weight: 600;
	background-color: #FFFFFF;
	border-bottom: 1rpx solid #F2F2F2;
	.gr_default{
		color: #6C7B9A;
	}
	.gr_error{
		color: #f74c31;
	}
}
.leader-avatar-box {
	display: flex;
	align-items: center;
}
.leader-avatar {
	height: 80rpx;
	width: 80rpx;
	margin-right: 10rpx;
}
.im-data-none {
	display: block;
	line-height: 100rpx;
	text-align: center;
	font-size: 28rpx;
	color: $--gray;
}
</style>
